<script setup lang="ts">
import { computed, ref, onMounted } from "vue"
import { ElFormItem, ElInput, ElButton, ElRow, ElCol } from "element-plus"
import { Trash2 } from '@vben/icons'
import BaseQuestion from "./base-question.vue"
import { $t } from '@vben/locales';

defineOptions({ name: 'FillBlank' })

const props = defineProps<{
  modelValue: any
}>()

const emit = defineEmits(['update:modelValue'])

const optionsInit = ["", ""]

const baseRef = ref()

const init = () => { }

onMounted(() => {
  if (!props.modelValue.answers || props.modelValue.answers.length === 0) {
    props.modelValue.answers = ["", ""]
  }
})

const getPlaceholderText = (index: number, prefix: string) => {
  return `${prefix}${index + 1}`;
}

const updateAnswer = (index: number, value: string) => {
  props.modelValue.answers[index] = value
}

const onAdd = () => {
  props.modelValue.answers.push("")
}

const del = (i: number) => {
  if (props.modelValue.answers.length > 1) {
    props.modelValue.answers.splice(i, 1)
  }
}

const answersEndIndex = computed(() => props.modelValue.answers?.length - 1 || 0)

const getData = async () => {
  const baseData = await baseRef.value?.getData()
  return {
    ...baseData,
    answers: JSON.stringify(props.modelValue.answers)
  }
}

const validate = () => {
  // 验证参考答案
  const hasEmptyAnswer = props.modelValue.answers?.some((s: any) => !s.trim()) || false
  if (hasEmptyAnswer) {
    return { valid: false, message: $t('questionBank.fillBlankAnswerRequired') }
  }

  // 调用base组件的验证
  return baseRef.value?.validate()
}

defineExpose({
  init,
  getData,
  validate,
  baseRef
})

</script>
<template>
  <BaseQuestion ref="baseRef" :modelValue="modelValue" :optionsInit="optionsInit">
    <template #answers>
      <el-form-item :label="$t('questionBank.referenceAnswer')" prop="answers">
        <ElRow :gutter="24" class="w-full px-0">
          <ElCol :span="12" v-for="(item, i) in modelValue.answers" :key="i">
            <div class="flex items-center mb-3">
              <ElInput :modelValue="modelValue.answers[i]" @update:modelValue="updateAnswer(i, $event)"
                :placeholder="getPlaceholderText(i, $t('questionBank.referenceAnswer'))" class="w-[93%]">
                <template #prepend>
                  <span class="px-2">{{ getPlaceholderText(i, $t('questionBank.blank')) }}</span>
                </template>
              </ElInput>
              <div class="ml-1 flex-1 flex">
                <el-button v-if="i === answersEndIndex && i > 0" link size="small" circle plain
                  @click="del(i)">
                  <Trash2 class="w-4 h-4" />
                </el-button>
              </div>
            </div>
          </ElCol>
        </ElRow>
        <div class="w-full">
          <el-button plain @click="onAdd">{{ $t('questionBank.add') }}</el-button>
        </div>
      </el-form-item>
    </template>
  </BaseQuestion>
</template>

<style lang="less" scoped>
.flex {
  display: flex;
}

.items-center {
  align-items: center;
}

.flex-1 {
  flex: 1;
}

.ml-2 {
  margin-left: 0.5rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.w-4 {
  width: 1rem;
}

.h-4 {
  height: 1rem;
}
</style>
